<template>
  <header class="topBar">
    <div class="header">
      <el-row :gutter="40">
        <el-col>
          <ul class="left-ul">
            <li>
              <a class="el-icon-goblet-square-full" href="#">主站</a>
            </li>
            <li>
              <a href="#">番剧</a>
            </li>
            <li>
              <a href="#" class="popTrigger">
                游戏中心
                <game-center class="toolPop"></game-center>
              </a>
            </li>
            <li>
              <a href="#" class="popTrigger">
                直播
                <zhibo-pop class="toolPop"></zhibo-pop>
              </a>
            </li>
            <li>
              <a href="#">会员购</a>
            </li>
            <li class="popTrigger">
              <a href="#">漫画</a>
              <manhua-pop class="toolPop"></manhua-pop>
            </li>
            <li>
              <a href="#">赛事</a>
            </li>
            <li>
              <a href="#">BW</a>
            </li>
            <li>
              <a href="#" class="el-icon-mobile">下载APP</a>
            </li>
          </ul>
        </el-col>
        <el-col :md="6" :lg="8" :offset="8" class="hidden-sm-and-down">
          <el-input placeholder="势不可挡！EDG2比0平推V5！">
            <el-button slot="append" size="mini" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col>
          <ul class="right-ul">
            <li>
              <a href="#" class="user-icon">
                <el-image :src="require('../../assets/icon.jpg')" lazy></el-image>
                <user-item1></user-item1>
              </a>
            </li>
            <li>
              <a href="#" class="popTrigger">
                大会员
                <pop-dhy class="toolPop"></pop-dhy>
              </a>
            </li>
            <li>
              <a href="#" class="popTrigger">
                消息
                <div class="new-message">4</div>
                <message-pop class="toolPop"></message-pop>
              </a>
            </li>
            <li class="popTrigger">
              <a href="#">动态</a>
              <dongtai-pop class="toolPop"></dongtai-pop>
            </li>
            <li class="popTrigger">
              <a href="#">收藏</a>
              <shoucang-pop class="toolPop"></shoucang-pop>
            </li>
            <li class="popTrigger">
              <a href="#">历史</a>
              <lishi-pop class="toolPop"></lishi-pop>
            </li>
            <li>
              <a href="#">创作中心</a>
            </li>
            <li class="popTrigger">
              <a href="#" class="tougao">投稿</a>
              <tougao-pop class="toolPop"></tougao-pop>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </header>
</template>
<script>
import userItem1 from '../popup/UserItem1'
import PopDhy from '../popup/ToolPopDhy'
import MessagePop from '../popup/MessagePop'
import GameCenter from '../popup/GameCenter'
import ZhiboPop from '../popup/ZhiboPop'
import ManhuaPop from '../popup/ManhuaPop'
import DongtaiPop from '../popup/DongtaiPop'
import ShoucangPop from '../popup/ShouCangPop.vue'
import LishiPop from '../popup/LishiPop.vue'
import TougaoPop from '../popup/TougaoPop.vue'
import '../../js/index.js'
export default {
  data() {
    return {}
  },
  components: {
    'user-item1': userItem1,
    'pop-dhy': PopDhy,
    'message-pop': MessagePop,
    'game-center': GameCenter,
    'zhibo-pop': ZhiboPop,
    'manhua-pop': ManhuaPop,
    'dongtai-pop': DongtaiPop,
    'shoucang-pop': ShoucangPop,
    'lishi-pop': LishiPop,
    'tougao-pop': TougaoPop,
  },
}
</script>
<style lang='less' scoped>
.el-row {
  width: 100%;
}
.topBar {
  position: relative;
  width: 100%;
  height: 18vh;
  background: url(../../assets/banner.png) no-repeat;
  background-position: center;
  background-size: cover;
  min-width: 999px;
}
.header {
  width: 100%;
  padding: 10px 10px;
}
.header li {
  float: left;
  padding-top: 2px;
  color: #fff;
  position: relative;
}
.left-ul,
.right-ul {
  position: absolute;
}
.left-ul {
  top: 0;
  left: 10px;
}
.right-ul {
  top: 0;
  right: 10px;
}
.left-ul li {
  margin-left: 10px;
}
.right-ul li {
  margin-left: 15px;
}
.left-ul li a:first-child {
  font-size: 14px !important;
}

.header a {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 30px;
  vertical-align: middle;
}
.el-icon-goblet-square-full::before {
  margin-right: 5px;
}
.el-icon-mobile::before {
  vertical-align: middle;
}
.header .user-icon {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: #000;
}
.user-icon .el-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin-top: 0.013333rem;
  z-index: 99;
  transition: all 0.3s;
}
.user-icon:hover .el-image {
  transform: scale(1.5) translateY(40%);
}

.header .tougao {
  display: inline-block;
  width: 90px;
  height: 35px;
  line-height: 35px;
  background-color: #fb7299;
  text-align: center;
  border-radius: 2px;
  margin-top: 0px;
}
.new-message {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: tomato;
  text-align: center;
  line-height: 15px;
  transform: translate(55%, -25%);
}
</style>
